<template>
	<view v-if="show">
		<view class="nav-bar">
			<view :style="{ height: statusBarHeight }"></view>
			<view class="nav-bar-header">
				<view class="nav-bar-header-btns">
					<uni-icons type="left" size="20" @click="backClick" style="margin-right: 5px;" v-if="isBack" />
					<uni-icons type="home" size="20" @click="indexClick" />
				</view>
			</view>
		</view>
		<view class="swiper-content">
			<uni-swiper-dot :info="detail.images" :current="swiperDotCurrent" field="content" mode="default">
				<swiper class="swiper-box" @change="swiperChange">
					<swiper-item v-for="(item, index) in detail.images" :key="index">
						<view>
							<image class="swiper-image" :src="item" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="section_fun">
			<view class="fun_content">
				<view class="title">
					<view class="title-left">
						{{ detail.name }}
					</view>
					<view class="title-right">
						<view class="price">
							￥{{ product_price }}
						</view>
						<!-- <view class="rise">
							起
							<view class="rise-img">
								<image src="../../static/icon/dectail_quan.png" mode=""></image>
							</view>
						</view> -->
					</view>
				</view>

				<view class="product-select" @click="reservationClick">
					<view class="select-left">
						选择拍摄产品
					</view>
					<view class="select-right">
						<image src="../../static/icon/detail_select.png" mode=""></image>
					</view>
				</view>

				<view class="address" @click="locationClick" v-if="storeInfo.id > 0">
					<view class="left">
						<image src="../../static/icon/location.png" mode="" @click="locationClick"></image>
						{{ storeInfo.address }}
					</view>
					<view class="right">
						距离：{{ storeInfo.distance }}km
					</view>
				</view>
			</view>
		</view>

		<view class="service" v-if="serviceList.length > 0">
			<view class="title">
				<view>
					服务&交付标准
				</view>
				<view>
					<image src="../../static/icon/detail_select.png" mode=""></image>
				</view>
			</view>

			<view class="content">
				<view class="item" v-for="(item,index) in serviceList" :key="index">
					<image :src="item.image" mode=""></image>
					<view class="text">
						{{ item.title }}
					</view>
				</view>
			</view>
		</view>

		<view class="product-conent">
			<view class="nav">
				<view class="nav-item nav-item-active">
					<div class="nav-item-title">
						产品详情
						<view class="nav-img">
							<image src="../../static/icon/dectail_quan.png" mode=""></image>
						</view>
					</div>
				</view>
				<!-- <view class="nav-item nav-item-no">
					<div class="nav-item-title">
						服务说明
					</div>
				</view>
				<view class="nav-item nav-item-no">
					<div class="nav-item-title">
						客片秀
					</div>
				</view> -->
			</view>
			<view class="product-detail">
				<view class="product-detail-content" v-if="detail.content">
					<u-parse :content="detail.content" :imageProp="{mode:'widthFix'}"></u-parse>
				</view>
			</view>
		</view>

		<view class="">
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content" :style="{'height':popupHeight +'px'}">
					<view class="content-header">
						<view class="header-text">
							请选择拍摄产品
						</view>
						<image src="../../static/icon/close.png" mode="" @click="closePopup"></image>
					</view>
					<view class="conten-imgs">
						<view class="imgs-item">
							<image :src="product_spec_image" mode="scaleToFill"></image>
							<!-- <view class="imgs-text">
								合家欢
							</view> -->
						</view>
						<view class="conten-product">
							<view class="conten-product-name">
								{{ detail.name }}
							</view>
							<view class="text-red">
								￥{{ product_price }}
							</view>
						</view>
					</view>
					<view class="" style="overflow: scroll;" :style="{'height': popupHeight - 200 + 'px'}">
						<scroll-view :scroll-y="true" scroll-with-animation :throttle="false">

							<view class="content-spec" v-for="(item,index) in specData.spec_attr" :key="index">
								<view class="spec-header">
									{{ item.group_name }}
								</view>
								<view class="spec-content">
									<view class="spec-tag" v-for="(sitem,sindex) in item.spec_items" :key="sindex"
										:class="{'spec-tag-active': sitem.checked,'spec-tag-no': !sitem.checked}"
										@click="specItemClick(index,sindex)">
										{{ sitem.spec_value }}
									</view>
								</view>
							</view>
							<view class="content-number">
								<view class="text">
									人数
								</view>
								<view class="text-red">
									{{ product_people_nums }}
								</view>
							</view>
							<view class="content-number" v-if="product_deposit > 0">
								<view class="text">
									押金
								</view>
								<view class="text-red">
									￥{{ product_deposit }}
								</view>
							</view>
							<!-- <view class="content-number">
								<view class="text">
									合家欢拍摄人数
								</view>
								<view class="">
									<uni-number-box />
								</view>
							</view> -->
						</scroll-view>
					</view>

					<view class="popup-footer">
						<view class="pfooter-content">
							<view class="pfooter-left">
								<view class="sum">
									<text>合计：</text>
									<text class="text-red">￥{{ total_price }}</text>
								</view>
								<view class="desc">
									实际支付金额以订单确认页为准
								</view>
							</view>
							<view class="pftooer-right">
								<view class="pftooer-buy-btn" @click="confirmClick">
									确定
								</view>
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>

		<view class="footer">
			<view class="footer-content">
				<view class="footer-buy-btn" @click="reservationClick">
					立即预约
				</view>
			</view>
		</view>

		<view>
			<authorize ref="authorize" :auth-show="authShow" :info-auth="infoAuth" :mobile-auth="mobileAuth"
				@updateInfo="userUpdateInfo">
			</authorize>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
	} from 'vuex';
	export default {
		data() {
			return {
				popupHeight: 500,
				swiperDotCurrent: 0,
				id: 0,
				show: false,
				detail: {},
				specData: [],
				product_spec_arr: [], // 记录规格的数组
				product_sku_id: 0, // 规格id
				product_price: 0,
				product_deposit: 0,
				product_people_nums: 0,
				product_spec_image: '',
				sku_hidden_arr: [],
				total_price: 0, //合计
				serviceList: [],
				authShow: false,
				storeInfo: {},
				statusBarHeight: '50px',
				showOverlay: false
			}
		},
		computed: {
			...mapGetters({
				userInfo: 'user/info',
				infoAuth: 'user/infoAuth',
				mobileAuth: 'user/mobileAuth',
				location: 'user/location',
			}),
			isBack() {
				let page = getCurrentPages()

				return page.length <= 1 ? false : true
			}
		},
		onLoad(options) {
			this.showOverlay = getApp().globalData.showOverlay
			
			if (this.showOverlay) {
				this.statusBarHeight = '50px'
			} else {
				this.statusBarHeight = uni.getWindowInfo().statusBarHeight + 'px'

				let systemInfo = uni.getSystemInfoSync()

				this.popupHeight = systemInfo.windowHeight - 300
			}
			
			if (options.scene) {
				this.id = options.scene
			} else {
				this.id = options.id
			}

			this.getLocation()
			this.getDetail()
		},
		onShareAppMessage() {
			this.shareSend()
			return {
				title: this.detail.name,
				path: `/pages/product/detail?id=${this.id}`,
				imageUrl: this.detail.images[0]
			}
		},
		onShareTimeline() {
			this.shareSend()
			return {
				title: this.detail.name,
				imageUrl: this.detail.images[0],
				query: `id=${this.id}`
			}
		},
		methods: {
			...mapMutations({
				setUserInfo: 'user/login',
				setLocation: 'user/location'
			}),
			userUpdateInfo(data) {
				this.setUserInfo(data)
			},
			swiperChange(e) {
				this.swiperDotCurrent = e.detail.current
			},
			backClick() {
				uni.navigateBack({
					delta: 1
				})
			},
			indexClick() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			shareSend() {
				let _this = this
				_this.$api.get('meet.user/share', {}).then(res => {}, fail => {})
			},
			/**
			 * 获取用户当前地理位置信息
			 */
			getLocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success(res) {
						let {
							latitude,
							longitude
						} = res

						if (_this.location.latitude != latitude || _this.location.longitude != longitude) {
							_this.setLocation({
								latitude: latitude,
								longitude: longitude
							})
							//_this.geocoder(latitude, longitude)
						}

						_this.getStore()
					},
					fail(error) {
						//拒绝授权定位
						console.log(error)
						_this.getStore()
					}
				})
			},
			locationClick() {
				uni.openLocation({
					latitude: parseFloat(this.storeInfo.latitude),
					longitude: parseFloat(this.storeInfo.longitude),
					scale: 16,
					address: this.storeInfo.address,
					success: function() {}
				})
			},
			getStore() {
				let _this = this
				_this.$api.get('meet/product.index/getStoreInfo', {
					product_id: _this.id,
					latitude: _this.location.latitude,
					longitude: _this.location.longitude
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						_this.storeInfo = res.data
					}
				}, fail => {})
			},
			geocoder(latitude, longitude) {
				let _this = this
				_this.$api.get('meet.index/geocoder', {
					location: latitude + ',' + longitude
				}).then(res => {
					if (res.code == 1) {
						_this.setLocation({
							city_name: res.data.address_component.city
						})
					}
				}, fail => {})
			},
			getDetail() {
				let _this = this
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				_this.$api.get('meet/product.index/detail', {
					id: _this.id
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						_this.detail = res.data.detail
						_this.specData = res.data.specData
						_this.serviceList = res.data.service_list

						if (_this.detail.spec_type === '20') {
							_this.initManySpecData(res.data);
						} else {
							_this.product_sku_id = _this.detail.spec[0].spec_sku_id
							_this.product_price = _this.detail.spec[0].product_price
							_this.product_deposit = _this.detail.spec[0].product_deposit
							_this.product_people_nums = _this.detail.spec[0].product_people_nums
							_this.product_spec_image = _this.detail.spec[0].spec_image_full
							_this.total_price = _this.product_price + _this.product_deposit
						}

						//根据选择后的情况 分配sku的可选情况
						if (_this.detail.spec_type === '20') {
							_this.make_sku_showData(_this.specData, 0);
						}

						_this.show = true
					} else {
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							cancelText: '',
							confirmText: '确认',
							success: res => {
								uni.navigateBack({
									delta: 1
								});
							},
							fail: () => {},
							complete: () => {}
						});
					}
				}, fail => {})
			},
			/**
			 * 初始化产品多规格
			 */
			initManySpecData(data) {
				let _this = this;
				for (let i in data.specData.spec_list) {
					let sku_id = data.specData.spec_list[i].spec_sku_id.split('_');
					//初始化 sku 显示
					//产品价格/押金/人数
					_this.product_sku_id = data.detail.spec[i].spec_sku_id
					_this.product_price = data.detail.spec[i].product_price
					_this.product_deposit = data.detail.spec[i].product_deposit
					_this.product_people_nums = data.detail.spec[i].product_people_nums
					_this.product_spec_image = data.detail.spec[i].spec_image_full

					for (let j in sku_id) {
						_this.product_spec_arr[j] = parseInt(sku_id[j]);
					}
					break;
				}

				_this.total_price = _this.product_price + _this.product_deposit

				for (let i in _this.specData.spec_attr) {
					let spec_items = _this.specData.spec_attr[i].spec_items
					for (let j in spec_items) {
						_this.specData.spec_attr[i].spec_items[j].checked = j == 0 ? true : false
					}
				}

				//初始化 隐藏sku数组
				_this.sku_hidden_arr = [];

			},

			make_sku_showData(data, break_num) {
				let _this = this;
				//显示的sku数据为：
				let Showskuiteam = data.spec_attr;
				//初始化显示数据hidden为false
				Showskuiteam.forEach(function(value, index, array) {
					value.spec_items.forEach(function(value1, index1, array1) {
						value1.hidden = false;
					});
				});

				//循环 行规格 可选格式化，根据后面所有不变的sku规格
				Showskuiteam.forEach(function(value, index, array) {
					//这里 那一个选项
					//if (index != break_num) {
					_this.for_eachsku_showData(Showskuiteam, index);
					//}
				});
			},

			for_eachsku_showData(Showskuiteam, ForNum) {
				//隐藏sku组合情况：
				let Sku_hidden = this.sku_hidden_arr;
				//现在选择的情况是：
				let Nowselect = this.product_spec_arr;

				//循环 每行规格 可选格式化，根据后面所有不变的sku规格
				Sku_hidden.forEach(function(Sku_hiddenvalue, Sku_hiddenindex, Sku_hiddenarray) {
					//针对每个隐藏sku 匹配
					let peiduiNum = 0;
					Sku_hiddenvalue.forEach(function(value, index, array) {
						if (index != ForNum) {
							if (value == Nowselect[index]) {
								peiduiNum++;
							}
						}
					});

					if (peiduiNum == (Nowselect.length - 1)) {
						//此时 此sku为隐藏项目
						Showskuiteam.forEach(function(Showskuiteamvalue, Showskuiteamindex, Showskuiteamarray) {
							Showskuiteamvalue.spec_items.forEach(function(value1, index1, array1) {
								if (value1.item_id == Sku_hiddenvalue[ForNum]) {
									value1.hidden = true;
								}
							});
						});
					}
				})
			},

			specItemClick(index, sindex) {
				let _this = this

				for (let j in _this.specData.spec_attr[index].spec_items) {
					if (sindex == j) {
						_this.$set(_this.specData.spec_attr[index].spec_items, j, {
							..._this.specData.spec_attr[index].spec_items[j],
							checked: true
						})

						this.productChange(index, _this.specData.spec_attr[index].spec_items[j].item_id)
					} else {
						_this.$set(_this.specData.spec_attr[index].spec_items, j, {
							..._this.specData.spec_attr[index].spec_items[j],
							checked: false
						})
					}
				}
			},

			productChange(attr_idx, item_id) {
				let product_spec_arr = this.product_spec_arr

				product_spec_arr[attr_idx] = parseInt(item_id)

				//这里如果发现目前选项是不可选的，那么通过分配其余可选的选项  
				this.make_good_sel_sku(product_spec_arr, attr_idx);

				this.updateSpecProduct();

				this.make_sku_showData(this.specData, attr_idx);

				this.total_price = this.product_price + this.product_deposit
			},

			/**
			 * 更新产品规格信息
			 */
			updateSpecProduct: function() {
				let spec_sku_id = this.product_spec_arr.join('_');

				// 查找skuItem
				let spec_list = this.specData.spec_list,
					skuItem = spec_list.find((val) => {
						return val.spec_sku_id == spec_sku_id;
					});

				// 记录product_sku_id
				// 更新产品价格、押金、人数
				if (typeof skuItem === 'object') {
					this.product_sku_id = skuItem.spec_sku_id
					this.product_price = skuItem.form.product_price
					this.product_deposit = skuItem.form.product_deposit
					this.product_people_nums = skuItem.form.product_people_nums
					this.product_spec_image = skuItem.form.imgshow
				}
			},

			make_good_sel_sku: function(product_spec_arr, attr_idx) {
				let _this = this;
				//首先判断此选项是否合法
				if (!_this.check_good_sel_sku(product_spec_arr)) {
					//循环sku列表 找到当前选择的第一匹配sku项目
					let spec_list = _this.specData.spec_list;
					spec_list.forEach(function(value, index, array) {
						let sku_id_arr = value.spec_sku_id.split('_');
						sku_id_arr.forEach(function(sku_id_arrvalue, sku_id_arrindex, sku_id_arrarray) {
							if (sku_id_arrindex == attr_idx && product_spec_arr[sku_id_arrindex] ==
								sku_id_arrvalue) {
								//找到目前的匹配项 可使用的sku
								product_spec_arr = sku_id_arr;
							}
						});
					});
				}

				//格式化
				product_spec_arr.forEach(function(value, index, array) {
					product_spec_arr[index] = parseInt(value);
				});

				_this.product_spec_arr = product_spec_arr
			},

			check_good_sel_sku: function(product_spec_arr) {
				let re_r = true;
				//隐藏sku组合情况：
				let Sku_hidden = this.sku_hidden_arr;

				Sku_hidden.forEach(function(Sku_hiddenvalue, Sku_hiddenindex, Sku_hiddenarray) {
					//针对每个影藏sku 匹配
					var peiduiNum = 0;
					Sku_hiddenvalue.forEach(function(value, index, array) {
						if (value == product_spec_arr[index]) {
							peiduiNum++;
						}
					});
					if (peiduiNum == Sku_hiddenvalue.length) {
						//发现了不合法
						re_r = false;
					}
				});
				return re_r;
			},

			reservationClick() {
				if(this.showOverlay){
					this.toast('请前往小程序使用完整服务')
					return false
				}
				this.$refs.popup.open('bottom')
			},

			closePopup() {
				this.$refs.popup.close()
			},

			confirmClick() {
				let _this = this
				if (!_this.infoAuth) {
					_this.authShow = true
					_this.$refs.authorize.$refs.popup.open('center')
				} else if (!_this.mobileAuth) {
					_this.authShow = true
					_this.$refs.authorize.$refs.mobilePopup.open('center')
				} else {
					uni.navigateTo({
						url: '/pages/product/reservation?product_id=' + _this.detail.id + '&product_sku_id=' +
							_this
							.product_sku_id
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
		padding-bottom: 200rpx;
	}

	.text-red {
		color: #F73830
	}

	.nav-bar {
		position: fixed;
		z-index: 99;
		left: 0;
		right: 0;
		top: 0;

		.nav-bar-header {
			padding: 0 10px;
			height: 44px;
			width: 100px;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.nav-bar-header-btns {
				border: 1px solid #f8f8f845;
				padding: 5px;
				border-radius: 15px;
			}
		}
	}

	.swiper-content {
		height: 812rpx;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.swiper-box {
		height: 812rpx;
	}

	.swiper-image {
		width: 100%;
		height: 812rpx;
	}

	.uni-swiper__dots-box {
		bottom: 82rpx !important;
	}

	.section_fun {
		margin-top: 742rpx;
		padding: 0 28rpx;

		.fun_content {
			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
			border-radius: 32rpx;
			padding: 40rpx 32rpx 66rpx 32rpx;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: start;

				.title-left {
					font-weight: 800;
					font-size: 40rpx;
					color: #000000;
					width: 60%;
				}

				.title-right {
					display: flex;
					align-items: center;
					font-weight: 800;
					font-size: 36rpx;
					color: #000000;

					.rise {
						position: relative;
						overflow: hidden;
						width: 57rpx;
						height: 57rpx;
						text-align: center;

						.rise-img {
							position: absolute;
							top: 0;
							left: 0;
							width: 57rpx;
							height: 57rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}

			.product-select {
				margin-top: 28rpx;
				height: 94rpx;
				background: #FFFCF5;
				border-radius: 10rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 48rpx 0 16rpx;

				.select-left {
					font-weight: 400;
					font-size: 28rpx;
					color: #AA9270;
				}

				.select-right {
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.address {
				margin-top: 28rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;
					font-weight: 800;
					font-size: 28rpx;
					color: #000000;

					image {
						width: 60rpx;
						height: 60rpx;
						margin-right: 10rpx;
					}
				}

				.right {
					font-weight: 400;
					font-size: 20rpx;
					color: #8A8A8A;
				}
			}
		}
	}

	.service {
		margin-top: 58rpx;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: 800;
			font-size: 40rpx;
			color: #000000;
			padding: 0 40rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.content {
			margin-top: 54rpx;
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			.item {
				width: 20%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-direction: column;
				margin-bottom: 30rpx;

				image {
					width: 60rpx;
					height: 60rpx;
				}

				.text {
					font-weight: 400;
					font-size: 20rpx;
					color: #000000;
					margin-top: 30rpx;
					width: 80%;
				}
			}
		}
	}

	.product-conent {
		margin-top: 86rpx;

		.nav {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.nav-item {
				width: 33%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
			}

			.nav-item-no {
				font-weight: 400;
				font-size: 32rpx;
				color: #AA9270;
			}

			.nav-item-title {
				position: relative;

				.nav-img {
					position: absolute;
					top: 0;
					left: 30%;
					width: 68rpx;
					height: 68rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.nav-item-active {
				font-weight: 800;
				font-size: 36rpx;
				color: #000000;
			}
		}

		.product-detail {
			overflow: hidden;
			// padding: 28rpx;
			padding-top: 26rpx;

			.product-detail-content {
				width: 100%;
				overflow: hidden;
			}

			image {
				// width: 706rpx !important;
				width: 100% !important;
				display: block;
				margin: 0 auto;
				margin-left: 0rpx;
			}
		}
	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		height: 144rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.5);

		.footer-content {
			display: flex;
			justify-content: flex-end;
			padding: 28rpx;

			.footer-buy-btn {
				width: 194rpx;
				height: 80rpx;
				background: #000000;
				border-radius: 40rpx;
				color: #FFFFFF;
				font-weight: 800;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.popup-content {
		padding: 40rpx;
		position: relative;

		.content-header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.header-text {
				font-weight: 800;
				font-size: 36rpx;
				color: #000000;
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.conten-imgs {
			margin-top: 48rpx;
			display: flex;
			align-items: flex-start;
			padding-bottom: 46rpx;
			border-bottom: 2rpx solid #F0F0F0;

			.imgs-item {
				margin-right: 18rpx;
				background: #FFFFFF;
				// padding: 0 10rpx 6rpx 10rpx;
				position: relative;
				display: flex;
				align-items: flex-end;
				width: 161rpx;
				height: 161rpx;
				margin-right: 10rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}

				.imgs-text {
					position: absolute;
					bottom: 6rpx;
					left: 0;
					text-align: center;
					width: 100%;
					font-weight: 400;
					font-size: 20rpx;
					color: #FFFFFF;
				}
			}

			.conten-product {
				width: calc(100% - 171rpx);
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 161rpx;
				font-weight: 800;
				font-size: 32rpx;
				color: #010101;
			}
		}

		.content-spec {
			margin-top: 32rpx;
			padding-bottom: 28rpx;
			border-bottom: 2rpx solid #F0F0F0;

			.spec-header {
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
			}

			.spec-content {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				margin-top: 24rpx;

				.spec-tag {
					padding: 0 26rpx;
					height: 54rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 24rpx;
					margin-bottom: 28rpx;
					border-radius: 28rpx;
					font-weight: 800;
					font-size: 24rpx;
				}

				.spec-tag-no {
					border: 2rpx solid #DCDCDC;
					color: #060606;
					background: #FFFFFF;
				}

				.spec-tag-active {
					border: 2rpx solid #35D14A;
					background: rgba(53, 209, 74, 0.15);
					color: #35D14A;
				}
			}
		}

		.content-number {
			padding: 32rpx 0 24rpx 0;
			border-bottom: 2rpx solid #F0F0F0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.text {
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
			}
		}

		.popup-footer {
			position: fixed;
			bottom: 0;
			left: 0%;
			width: 100%;
			background-color: #FFFFFF;

			.pfooter-content {
				margin: 0 40rpx 40rpx 40rpx;
				border-top: 2rpx solid #F0F0F0;
				padding-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.pfooter-left {
					.sum {
						font-weight: 800;
						font-size: 32rpx;
					}

					.desc {
						font-weight: 400;
						font-size: 24rpx;
						color: #8A8A8A;
					}
				}

				.pftooer-right {
					.pftooer-buy-btn {
						width: 222rpx;
						height: 80rpx;
						background: #000000;
						border-radius: 40rpx;
						font-weight: 800;
						font-size: 28rpx;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}
</style>